<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">

    <div id="a1">
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="120px" class="demo-ruleForm" style="margin: 200px 400px;">
            <el-form-item label="患者姓名" prop="name">
                <el-input v-model="info.name" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="患者身份证号" prop="identity">
                <el-input v-model="info.identity" style="width: 400px;"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('info')" style="width: 400px;">查询</el-button>
            </el-form-item>

        </el-form>
    </div>

    <div id="a2">
        <el-table :data="xinxi" height="250"borderstyle="width: 100%">
            <el-table-column prop="id"label="编号"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="kname"label="科室"></el-table-column>
            <el-table-column prop="price"label="价格"></el-table-column>
            <el-table-column prop="state"label="状态"></el-table-column>
            <el-table-column label="操作">
                <template  slot-scope="scope">
                    <el-button type="danger" @click="showResult(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <div id="a3">
        <template>

            <el-descriptions title="用户信息" :v-model="parInfo">
                <el-descriptions-item label="姓名">{{parInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{parInfo.age}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
                <el-descriptions-item label="身份证号">{{parInfo.identity}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{parInfo.gender}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
                <el-descriptions-item label="手机号">{{parInfo.telephone}}</el-descriptions-item>
            </el-descriptions>

            <hr/>
            病情:
            <div class="tip">
                <p>{{parInfo.pathogeny}}</p>
            </div>
            建议:
            <div class="tip">
                <p>{{parInfo.suggest}}</p>
            </div>
            <hr />
            <!--开方:-->
            <!--<el-input v-model="getInfo.prescription" placeholder="请输入内容"></el-input>-->
            <!--<hr />-->
            <el-descriptions>
                <el-descriptions-item label="科室">{{parInfo.kname}}</el-descriptions-item>
                <el-descriptions-item label="医生">{{parInfo.yname}}</el-descriptions-item>
            </el-descriptions>
            <el-button type="primary" @click="exportPar()">下载</el-button>
            <el-button type="primary" @click="btn3()">返回</el-button>
        </template>
    </div>



</div>

<script>
    var haha = new Vue({
        el: "#app",
        data: {
            info: {},
            xinxi:[],
            parInfo:[],
            rules: {
                name: [
                    {required: true,message: '请输入姓名',trigger: 'blur'},
                ],
                identity: [
                    {required: true,message: '请输入身份证号',trigger: 'blur'},
                    {min: 17,max: 19,message: '请输入正确的身份证号',trigger: 'blur'}
                ]
            }
        },
        methods: {

            exportPar(){
                window.location.href="/ssm/parsource/download?name="+haha.parInfo.name+"&age="+haha.parInfo.age+"&identity="+haha.parInfo.identity+"&gender="+haha.parInfo.gender+"&telephone="+haha.parInfo.telephone+"&pathogeny="+haha.parInfo.pathogeny+"&suggest="+haha.parInfo.suggest+"&kname="+haha.parInfo.kname+"&yname="+haha.parInfo.yname;

            },

            showResult(id){
                $.post("/ssm/Udepart/Result/"+id, haha.info, function(backData) {
                    haha.parInfo = backData.data;
                    if(backData.code == 1){
                        $("#a2").hide();
                        $("#a3").show();
                    }
                });
            },


            submitForm(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $("#a1").hide();
                        $("#a2").show();
                        $.post("/ssm/Udepart/information", haha.info, function(backData) {
                            haha.xinxi = backData.data;
                        });
                    }
                });
            },

            btn3(){
                $("#a1").hide();

                $("#a2").show();

                $("#a3").hide();
            }

        }

    });
    $("#a2").hide();
    $("#a3").hide();
</script>
</body>
</html>
